<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "requireItem",
});
</script>
<script setup lang="ts">
import { Router } from "@/utils/router";
import { ref, toRefs, computed } from "vue";
import { Date } from "@/utils/date";
import dayjs from "dayjs";
type DataType = {
  name: string;
  travel_agency_logo: string;
  travel_agency_name: string;
  task_status: number;
  guide_need_arr: string[];
  cdate: string;
  type_name: string;
  start_date: string;
  end_date: string;
  is_emergency: number;
  emergency_end_time: number;
  recept_count: number;
  salary_type: number;
  salary: number;
  max_salary: number;
  end_area_name_arr: string[];
  id: number;
};
const props = defineProps<{ data: DataType }>();
const toDetail = () => {
  Router.navigateTo(`/package/require/pages/detail/index?id=${props.data.id}`);
};
const allDate = computed(() => {
  let day = 0;
  let hour = 0;
  let minute = 0;
  const time = props.data.emergency_end_time;
  day = Math.floor(time / (60 * 60 * 24));
  const rest = time - day * (60 * 60 * 24);
  hour = Math.floor(rest / (60 * 60));
  const rest2 = rest - hour * 60 * 60;
  minute = Math.floor(rest2 / 60);
  return { day, hour, minute };
});
const {
  type_name,
  name,
  is_emergency,
  guide_need_arr,
  salary,
  max_salary,
  salary_type,
  start_date,
  end_date,
  recept_count,
  end_area_name_arr,
  travel_agency_logo,
  travel_agency_name,
  cdate,
} = toRefs(props.data);
</script>

<template>
  <view class="requireItemWrap" @click="toDetail">
    <view class="rhead">
      <view>{{ type_name }}</view>
      <view>{{ name }}</view>
      <view v-if="is_emergency">急单</view>
    </view>
    <view class="line1">
      <view class="line1Wrap">
        <view class="title"><text >导游要求：</text></view>
        <view class="LineTagWrap">
          <view
            class="line1Tag"
            v-for="(item, index) in guide_need_arr"
            :key="index"
          >
            {{ item }}
          </view>
        </view>
      </view>
      <view class="mony2" v-if="salary_type == 3">
        <text>议价</text>
      </view>
      <view class="mony" v-else>
        <text>￥</text>
        <text>{{ salary }}-{{ max_salary }}</text>
        <text v-if="salary_type == 2">/日</text>
      </view>
    </view>
    <view class="line2">
      <view class="title">出行日期：</view>
      <view class="date"> {{start_date}} - {{end_date}} </view>
    </view>
    <view class="line3">
      <view class="title">接待人数：</view>
      <view class="date"> {{recept_count}}人 </view>
      <view class="title">目的地：</view>
      <view class="date"><text>{{end_area_name_arr[0]}}</text> <text v-if="end_area_name_arr.length>1">、更多</text> </view>
    </view>
    <view class="footer2">
      <view class="headImg">
        <image
          :src="travel_agency_logo"
        ></image>
      </view>
      <view class="des">
        <view class="title">{{travel_agency_name}}</view>
        <view class="date">{{cdate}}</view>
      </view>
      <view class="order">
        <view class="imageWrap">
          <image src="/package/require/static/squa.png"></image>
          <view class="orderWord">抢单</view>
        </view>
      </view>
      <view class="remind">
        <view class="word1"> 距结束 </view>
        <view class="word2">{{allDate.day}}</view>
        <view class="word1"> 天</view>
        <view class="word2">{{allDate.hour}}</view>
        <view class="word1">时</view>
        <view class="word2">{{allDate.minute}}</view>
        <view class="word1">分</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
.requireItemWrap {
  margin-top: 20rpx;
  width: 100%;
  height: 378rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  .rhead {
    display: flex;
    padding: 0;
    align-items: center;
    view:nth-child(1) {
      height: 32rpx;
      background: linear-gradient(45deg, #fdecc7, #fed5b2);
      padding: 0 20rpx;
      border-radius: 8rpx;
      text-align: center;
      font-size: 20rpx;
      color: #8e5a1f;
      line-height: 32rpx;
      flex-shrink: 0;
      margin-right: 10rpx;
    }
    view:nth-child(2) {
      @include lineLimit(1);
      margin-right: 10rpx;
      font-weight: bold;
    }
    view:nth-child(3) {
      flex-shrink: 0;
      width: 60rpx;
      height: 32rpx;
      background: rgba(253, 65, 61, 0.1);

      border-image: linear-gradient(132deg, #fd3d3a 6%, #fb8b6b 93%) 0.5 0.5;
      border-radius: 6rpx;
      border: 1rpx solid;
      font-size: 20rpx;
      color: #fd3d3a;
      line-height: 32rpx;
      text-align: center;
    }
  }
  .title {
    font-size: 26rpx;
    color: #666666;
    line-height: 48rpx;
  }
  .date {
    font-size: 26rpx;
    color: #999999;
    line-height: 48rpx;
  }
  .line1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line1Wrap {
      display: flex;
      align-items: center;
      flex-grow: 1;
      .title {
        flex-shrink: 0;
      }
      .LineTagWrap {
        display: flex;
        overflow: hidden;
        height: 32rpx;
        margin-right: 10rpx;
        flex-wrap: wrap;
      }
    }

    .line1Tag {
      margin-left: 10rpx;
      height: 32rpx;
      background: #f5f5f5;
      border-radius: 8px;
      text-align: center;
      padding: 0 10rpx;
      font-size: 20rpx;
      flex-shrink: 0;
      color: #666666;
      line-height: 32rpx;
    }
    .mony {
      flex-shrink: 0;
      text:nth-child(n + 1) {
        font-size: 24rpx;
        color: #fa6400;
        line-height: 50rpx;
      }
      text:nth-child(2n) {
        font-size: 36rpx;
        color: #fa6400;
        line-height: 50rpx;
      }
      text:nth-child(2) {
        font-weight: bold;
      }
    }
    .mony2 {
      flex-shrink: 0;
      font-size: 36rpx;
      color: #fa6400;
      line-height: 50rpx;
      font-weight: bold;
    }
  }
  .line2 {
    display: flex;
  }
  .line3 {
    display: flex;
    .date {
      margin-right: 30rpx;
    }
  }
  .footer2 {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
    position: relative;
    .headImg {
      width: 44rpx;
      height: 44rpx;
      border: 1rpx solid #f1f1f1;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .des {
      .title {
        line-height: 34rpx;
        @include lineLimit(1);
      }
      .word {
        line-height: 34rpx;
      }
    }
    .order {
      position: absolute;
      right: 0;
      top: -20rpx;
      .imageWrap {
        width: 112rpx;
        height: 52rpx;
        position: relative;
        image {
          width: 100%;
          height: 100%;
        }
        .orderWord {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 24rpx;
          color: #ffffff;
          line-height: 34rpx;
          font-weight: bold;
        }
      }
    }
    .remind {
      position: absolute;
      top: 42rpx;
      right: 0;
      display: flex;
      align-items: center;
      .word1 {
        font-size: 24rpx;
        color: #333333;
        line-height: 34rpx;
        margin-right: 8rpx;
      }
      .word2 {
        font-size: 24rpx;
        color: #f56b2a;
        line-height: 34rpx;
        padding: 8rpx;
        border-radius: 4rpx;
        margin-right: 8rpx;
        font-weight: bold;
        background: rgba($color: #c7411b, $alpha: 0.05);
      }
    }
  }
}
</style>
